<template>
  <div style="width:800px;height: 500px;margin: 40px auto">
   <h3 style="text-align: left">创建发行版</h3>
    <el-row>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple">
          <el-form :rules="rules" ref="form" :model="form">
          <el-form-item prop="tagVersion">
          <el-input :prefix-icon="Edit" v-model="form.tagVersion" placeholder="标注一个版本" >
          </el-input>
          </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content ep-bg-purple" style="margin-top:4px">
          @
        </div>
      </el-col>
      <el-col :span="11" >
          <div >
            <el-select v-model="targetBranchName" class="m-2" placeholder="目标" style="margin-bottom:5%;width:50%;float: left">
              <el-option
                  v-for="item in tableData"
                  :key="item.branchName"
                  :label="item.branchName"
                  :value="item.branchName"
              />
            </el-select>
          </div>
      </el-col>
    </el-row>
    <el-form ref="form" :model="form">
    <el-form-item prop="newVersionTitle">
    <el-input placeholder="发行版的标题" v-model="form.tagTitle"></el-input>
    </el-form-item>
    <el-form-item prop="newVersionDescription">
    <el-input placeholder="描述此发行版"
              type="textarea"
              :rows="8"
    style="margin-top: 30px" v-model="form.description"></el-input>
    </el-form-item>
    <el-button type="primary" style="float: left;margin-top: 30px" @click="newRelease">创建</el-button>
      <el-button type="danger" style="float: left;margin-top: 30px" @click="BackTo">离开</el-button>
    </el-form>
  </div>
</template>

<script>
import  {Edit,Share} from "@element-plus/icons-vue"
import myBranch from "@/views/Branches.vue"
import request from "@/utils/request";

export default {
  name: "NewRelease",
  components:{
    myBranch,
  },
  created(){
    this.repoName=this.$route.params.repoName;
    this.ownerName=this.$route.params.userName;
    this.load()
  },
  setup(){
    return{
      Edit,
      Share,
    }
  },
  data(){
    return{
      repoName:'',
      ownerName:'',
      form:{
        tagVersion: '',
        tagTitle:'',
        description:'',
      },
      targetBranchName:'',
      tableData:'',

      rules:{
        tagVersion:[
          {required:true,message:'无效的标签名称，长度必须在1到191个字符之间,字符不能有空格',trigger:'blur'},
          {min:1,max:191,trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    load(){

      request.get(this.ownerName+'/'+this.repoName+'/branches',{
        params:{
          userName: this.ownerName,
          repoName: this.repoName,
        }
      }).then(res => {
        console.log(res)
        this.tableData=res.data
      })
    },

    BackTo(){
      this.$router.go(-1)
    },
    newRelease(){
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request.post('releases/new',{
            "ownerName":sessionStorage.getItem("userName"),
            "repoName":sessionStorage.getItem("repoName"),
           "tagVersion":this.form.tagVersion,
            "description":this.form.description,
            "tagTitle":this.form.tagTitle,
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "创建成功"
              })
              this.$router.push({
                path:'/'+sessionStorage.getItem("userName")+'/'+sessionStorage.getItem("repoName")+'/tree/master'
              })//跳转到登录界面
            }
            else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      })
    },
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
